<template>
	<view class="content">
		
		<u-navbar
			title="线上早教课"
			@leftClick="leftClick"
			:placeholder="true"
			:fixed="true"
			bgColor="transparent"
			:autoBack="true"
		>
		</u-navbar>
		
		<view class="vedio_box">
			<video class="_video" src="https://cdn.uviewui.com/uview/resources/video.mp4"></video>
		</view>
		
		<view class="page_box">
			<view class="title">第1节-宝宝的教育</view>
			<view class="title_son">这是一款依托于世界权威婴幼儿早期教育标准–The Early Years Foundation Stage（EYFS）体系理论研发而成的，专门针对0-3岁婴幼儿的线上课程。</view>
			<view class="clas_pro">课程目录</view>
			
			<block v-for="(item, index) in 3" :key="index">
				<view class="conte_box" :class="{'csd_opacity': index == 0}" @click="VipBuyShowButton">
					<view class="img_box_text">
						<view class="bofan_box">
							<image class="fan_img" src="../../static/img/bofan.png" ></image>
						</view>
						<view class="coent_text" >第{{index+1}}节-宝宝的教育</view>
					</view>
					<view class="conte_time">30:12</view>
				</view>
			</block>
		</view>
		
		<!-- 会员到期弹窗提醒 起 -->
		<ZnDaoqi v-if="VipBuyShow"></ZnDaoqi>
		<!-- 会员到期弹窗提醒 终 -->
		
	</view>
</template>

<script>
	import ZnDaoqi from '@/pages/daoqi/daoqi.vue';
	export default {
		components: {
			ZnDaoqi
		},
		data(){
			return{
				VipBuyShow: false,//会员到期弹窗提醒
			}
		},
		onLoad() {
			
		},
		methods:{
			leftClick(){
				uni.navigateBack({
					delta:1
				})
			},
			VipBuyShowButton(){
				this.VipBuyShow = true;
			}
		}
	}
</script>

<style>
	.content{
		width: 100%;
		overflow-x: hidden;
	}
	.vedio_box{
		width: 100%;
	}
	._video{
		width: 100%;
	}
	.page_box{
		padding: 40upx 26upx 0 26upx;
		box-sizing: border-box;
	}
	.title{
		font-size: 36upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 50upx;
	}
	.title_son{
		width: 696upx;
		height: 102upx;
		font-size: 24upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 34upx;
		margin-top: 24upx;
	}
	.clas_pro{
		font-size: 36upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 50upx;
		margin-top: 48upx;
	}
	.conte_box{
		width: 696upx;
		height: 114upx;
		background: rgba(242, 242, 242, 0.25);
		border-radius: 8upx;
		
		margin-top: 24upx;
		padding: 38upx 24upx 36upx 24upx;
		box-sizing: border-box;
		
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		margin-bottom: 24upx;
	}
	.bofan_box{
		width: 52upx;
		height: 40upx;
	}
	.fan_img{
		width: 52upx;
		height: 40upx;
	}
	.coent_text{
		height: 40upx;
		font-size: 28upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 40upx;
		margin-left: 24upx;
	}
	.conte_time{
		width: 60upx;
		height: 34upx;
		font-size: 24upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 34upx;
		margin-left: auto;
	}
	.img_box_text{
		display: flex;
	}
	.csd_opacity{
		opacity: 0.25;
	}
</style>
